import React, { useRef, useState } from 'react';
import { Space, Table, Popconfirm } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { UserListInter } from '@/service/userNew';
import { PaginationConfig, PaginationProps } from 'antd/es/pagination';
import './TableList.less';

interface ListPropsInter {
  data: UserListInter;
  pageData: { page: number; pageSize: number };
  handlePageChange: (data: { page: number; pageSize: number }) => void;
  handleEdit: (data: any) => void;
}
const TableList: React.FC<ListPropsInter> = (props) => {
  const onConfirmRestPassword = (record: any) => {
    console.log('重置密码', record);
    // 拿出id  请求后端重置密码的接口
  };
  const columns: ColumnsType<ListItemInter> = [
    {
      title: '登录账号',
      dataIndex: 'account',
    },
    {
      title: '人员姓名',
      dataIndex: 'name',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
    },
    {
      title: '用户状态',
      dataIndex: 'status',
      render: (_, { status }) => <>{_ === 0 ? '禁用' : '启用'}</>,
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => props.handleEdit(record)}>修改</a>
          <Popconfirm
            title="是否要重置密码"
            onConfirm={() => onConfirmRestPassword(record)}
            okText="是的"
            cancelText="取消"
          >
            <a href="#">重置密码</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];
  function onPageChange(current: number, pageSize: number) {
    // 调用方法 请求后端数据
    props.handlePageChange({ page: current, pageSize });
  }
  const pageConfig = useRef<PaginationProps>({
    defaultCurrent: 1,
    defaultPageSize: 5,
    showSizeChanger: true,
    pageSizeOptions: [5, 10, 20],
    showQuickJumper: true,
    showTotal(total, range) {
      return `第${range[0]}-${range[1]}条 一共${total}条`;
    },
  });
  //   pagination={{
  //     ...pageConfig.current,
  //     // current: props.pageData.page,
  //     defaultCurrent: 1,
  //     pageSize: props.pageData.pageSize,
  //     total: props.data.totalCount,
  //   }}
  return (
    <>
      <Table
        columns={columns}
        dataSource={props.data.list}
        rowKey="id"
        pagination={{
          ...pageConfig.current,
          pageSize: props.pageData.pageSize,
          total: props.data.totalCount,
          current: props.pageData.page,
          onChange: onPageChange,
        }}
      />
      {/* <Pagination
        {...pageConfig.current}
        pageSize={props.pageData.pageSize}
        total={props.data.totalCount}
      /> */}
    </>
  );
};

// 上下两种方法是一致的
// const App= (props:ListPropsInter) => <Table columns={columns} dataSource={props.data} />;

export default TableList;
